
<template>
  <div class="home">
    <el-row>
      <el-col :span="6">
        <el-menu
          :default-openeds="['1']"
          router
          :default-active="this.$route.path"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>社区服务</span>
            </template>
            <el-menu-item index="/systemNotice">社区公告</el-menu-item>
            <el-menu-item index="2-2">社区新闻</el-menu-item>
            <el-menu-item index="2-3">文艺活动</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span>时新政策</span>
            </template>
            <el-menu-item index="1-1">法律法规</el-menu-item>
            <el-menu-item index="/systemPolicy">政策解读</el-menu-item>
            <el-menu-item index="1-3">了解当下</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-order"></i>
              <span>回收申请</span>
            </template>
            <el-menu-item index="/applied">申请维护</el-menu-item>
            <el-menu-item index="/applied">申请处理</el-menu-item>
            <el-menu-item index="/applied">申请支付</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-delete-solid"></i>
              <span>再生资源</span>
            </template>
            <el-menu-item index="/mine">资源维护</el-menu-item>
            <el-menu-item index="/mine">资源交易</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-s-management"></i>
              <span>数据统计</span>
            </template>
            <el-menu-item index="/analyse">垃圾分类及参考价格</el-menu-item>
            <el-menu-item index="/analyse">个人交易信息统计</el-menu-item>
            <el-menu-item index="/analyse">社区交易情况统计</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
      <el-col :span="18">
        <el-carousel :interval="5000">
          <el-carousel-item>
            <img src="@/assets/images/banner/1.jpg" alt="轮播图1" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="@/assets/images/banner/2.jpg" alt="轮播图2" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="@/assets/images/banner/3.jpg" alt="轮播图3" />
          </el-carousel-item>
        </el-carousel>
        <el-card>
          <template slot="header">
            <i class="el-icon-s-promotion"></i>
            <span>推荐文章</span>
          </template>
          <el-collapse>
            <el-collapse-item title="垃圾分类的由来">
              <p>
                垃圾分类的由来可以追溯到上世纪70年代，当时随着城市化的发展，垃圾数量不断增加，垃圾处理成为了一个棘手的问题。同时，环境保护意识也逐渐增强，人们开始关注垃圾对环境带来的影响。
                在这种背景下，一些国家开始推行垃圾分类制度，以减少垃圾的产生和对环境的污染。例如，日本在1991年开始实行垃圾分类制度，而德国则是在1991年通过《垃圾分类回收法案》，将垃圾分类制度正式写入法律。
                近年来，随着全球环保意识的提高，越来越多的国家和地区开始实施垃圾分类制度。这有助于降低垃圾处理成本，减少对环境的损害，促进可持续发展。
              </p>
            </el-collapse-item>
            <el-collapse-item title="如何科学地进行垃圾回收">
              <p>
                首先，建立健全的垃圾分类制度和管理机制，确保分类准确、有效；其次，加强宣传教育，
                提高公众环保意识，增强参与垃圾分类回收的积极性；
                第三，在垃圾处理过程中采用科学技术和先进设备，实现高效、低成本的垃圾回收；
                最后，建立完善的废物资源利用体系，实现“废物变宝藏”，促进经济可持续发展。通过这些措施，可以实现垃圾分类回收的科学化、规范化和可持续化，从而更好地保护环境和造福人民。
              </p>
            </el-collapse-item>
            <el-collapse-item title="垃圾分类回收有什么好处">
              <p>
                垃圾分类回收可以降低垃圾处理成本。通过将可回收物、有害垃圾、湿垃圾和干垃圾等分类，可以减少垃圾的总量，并且可以更方便地进行后续处理。这不仅有助于环境保护，而且还可以降低垃圾处理的费用。
                可以提高废物资源的利用率。对于可回收的垃圾，经过再生利用后，可以降低对自然资源的消耗。例如，回收废纸可以减少木材的砍伐，回收金属可以减少对矿产资源的开采。这样就可以在不浪费任何资源的情况下创造出更多的价值。
                垃圾分类回收也可以缓解环境污染。垃圾对环境造成的污染和影响很多，例如温室气体排放、土壤污染等。通过垃圾分类回收，可以有效地减少垃圾对环境的负面影响，使我们生活的环境更加清洁和健康。
                同时，垃圾分类回收可以创造就业机会。垃圾分类回收需要专业人才的参与，因此可以创造更多的就业机会。同时，相关产业的发展也可以促进经济增长。
                最后，垃圾分类回收还可以促进公民环保意识的提高。垃圾分类回收是一种环保行为，可以帮助公民增强环保意识，并且让公民了解到垃圾分类回收的好处。这样有助于大家对环境保护产生更多的认识和热爱。
              </p>
            </el-collapse-item>
          </el-collapse>
        </el-card>
        <el-card>
          <template slot="header">
            <i class="el-icon-s-flag"></i>
            <span>热门话题</span>
          </template>
          <el-tag closable>社区建设</el-tag>
          <el-tag closable>环保政策</el-tag>
          <el-tag closable>城市规划</el-tag>
          <el-tag closable>教育改革</el-tag>
        </el-card>
        <el-card>
          <template slot="header">
            <i class="el-icon-menu"></i>
            <span>最新政策</span>
          </template>
          <p class="news-title">加载中...</p>
          <iframe
            src="http://www.gov.cn/zhengce/content/2017-03/30/content_5182124.htm"
            class="news-iframe"
          ></iframe>
        </el-card>
      </el-col>
    </el-row>
    <div class="charts">
      <el-row>
        <el-col :span="12">
          <el-card>
            <template slot="header">
              <i class="el-icon-s-data"></i>
              <span>回收量趋势</span>
            </template>
            <div ref="salesChart" class="chart"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <template slot="header">
              <i class="el-icon-s-data"></i>
              <span>访问量统计</span>
            </template>
            <div ref="visitChart" class="chart"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "Home",
  mounted() {
    // 初始化销售额趋势图表
    const salesChart = echarts.init(this.$refs.salesChart);
    salesChart.setOption({
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["上月回收量", "今月回收量"],
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
          "00:00",
          "01:00",
          "02:00",
          "03:00",
          "04:00",
          "05:00",
          "06:00",
          "07:00",
          "08:00",
          "09:00",
          "10:00",
          "11:00",
          "12:00",
          "13:00",
          "14:00",
          "15:00",
          "16:00",
          "17:00",
          "18:00",
          "19:00",
          "20:00",
          "21:00",
          "22:00",
          "23:00",
        ],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "上月回收量",
          type: "line",
          data: [
            820, 932, 901, 934, 1290, 1330, 1320, 1460, 1500, 1520, 1650, 1620,
            1820, 1800, 2000, 2000, 2200, 2200, 2400, 2400, 2400, 2300, 2200,
            2000, 1900,
          ],
        },
        {
          name: "今月回收量",
          type: "line",
          data: [
            1220, 1120, 1320, 1120, 1890, 2320, 2410, 3800, 4500, 6520, 7200,
            9210, 8720, 9520, 8540, 6820, 6010, 5020, 4210, 3380, 2700, 2010,
            1320, 790, 380,
          ],
        },
      ],
    });

    // 初始化访问量统计图表
    const visitChart = echarts.init(this.$refs.visitChart);
    visitChart.setOption({
      tooltip: {},
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
        },
      ],
    });

    // 监听最新政策标题的变化
    const newsTitleEl = this.$el.querySelector(".news-title");
    const newsIframeEl = this.$el.querySelector(".news-iframe");
    newsIframeEl.addEventListener("load", () => {
      const newsTitle = newsIframeEl.contentWindow.document.querySelector("h1");
      newsTitleEl.textContent = newsTitle.textContent;
    });
  },
};
</script>

<style scoped>
.home {
  padding: 20px;
  .chart {
    height: 300px;
  }
  .news-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
  }
  .news-iframe {
    width: 100%;
    height: 300px;
    border: none;
  }
}
</style>
